<template>
    <div class="overall">
      <div class="content">
        <ul>
          <li><img src="@/modules/module4/modules4-War/assets/image/405.jpg"></li>
          <li><img src="@/modules/module4/modules4-War/assets/image/406.jpg"></li>
          <li><img src="@/modules/module4/modules4-War/assets/image/407.jpg"></li>
        </ul>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </div>        
    </div>
  </template>
  
  <script>
  export default {
    mounted() {
      var content = this.$el.querySelector(".content");
  
      if (!content) {
        console.error("无法找到 .content 元素");
        return;
      }
  
      var li = content.getElementsByTagName("li");
  
      function fun(i, j) {
        li[i].style.opacity = 1;
        li[j].style.opacity = 0;
        li[i + 3].style.backgroundColor = "#ffffff";
        li[j + 3].style.backgroundColor = "#00000000";
      }
  
      fun(0, 1);
      var i = 0;
  
      function auto() {
        i++;
        if (i >= 3) {
          i = 0;
          fun(0, 2);
        } else {
          fun(i, i - 1);
        }
      }
  
      var timer = setInterval(auto, 2000);
  
      content.onmouseover = function () {
        clearInterval(timer);
      };
  
      content.onmouseout = function () {
        timer = setInterval(auto, 2000);
      };
  
      for (var j = 0; j < 3; j++) {
        li[j + 3].index = j;
        li[j + 3].onclick = function () {
          fun(this.index, i);
          i = this.index;
        };
      }
    }
  };
  </script>
  
  <style scoped>
  .overall{
    width: 900px;
    height: 500px;
    align-items: center;
    margin: 3% auto;        
  }
  
  .content{
    position: relative;
    height: 400px;
  }
  
  .content ul{
    list-style-type: none;
  }
  
  .content ul>li{
    width: 600px;
    height: 300px;
    position: absolute;
    transition: 1s;
    opacity: 0;
  }
  
  .content ul>li img{    
    width: 900px;
    height: 500px;
    border-radius: 5%;
    border: 5px solid #0e0600;        
  }
  
  .content ol{
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 75px);
    grid-template-rows: auto;
    grid-gap: 1em;
    gap:1em;
    float: right;
    margin-top: 450px;
    list-style: none;
    top: 0;
    left: 0;
  }
  
  .content ol li{
    width: 25px;
    height: 10px;
    font-size: 15px;
    line-height: 20px;
    float: left;
    text-align: center;
    border-radius: 2em;
    border: 5px solid #af9d9d;
  }
  </style>
  